<template>
  <div class="about-mobile">
    <!-- 页头 -->
    <div class="yetou">
      <div class="none">
        <div class="bt-left">
          <h1>万力达消防设备大卖场</h1>
          <p>{{configData.mobile}}</p>
        </div>
        <div class="menu">
          <img @click="hide = !hide" src="../assets/991.jpg" />
        </div>
      </div>
    </div>
    <!--导航开始-->
    <div class="vae" v-show="hide">
      <ul class="nav-tb">
        <li :class="navmoIndex == 0 ? 'active' : ''" @click="selNav(0)">
          <router-link to="/page/home_mobile">首页</router-link>
          <!-- <a href="#">首页</a> -->
        </li>
        <li :class="{ active: navmoIndex === 1 }" @click="selNav(1)">
          <router-link to="/page/product_mobile?num=0">消防水泵</router-link>
          <!--  <a href="#">消防水泵</a> -->
        </li>
        <li :class="{ active: navmoIndex === 2 }" @click="selNav(2)">
          <router-link to="/page/product_mobile?num=1">水泵控制柜</router-link>
          <!-- <a href="#">水泵控制柜</a> -->
        </li>
        <li :class="{ active: navmoIndex === 3 }" @click="selNav(3)">
          <router-link to="/page/product_mobile?num=2">气体灭火</router-link>
          <!--  <a href="#">气体灭火</a> -->
        </li>
        <li :class="{ active: navmoIndex === 4 }" @click="selNav(4)">
          <router-link to="/page/product_mobile?num=3">火灾报警</router-link>
          <!--     <a href="#">火灾报警</a> -->
        </li>
        <li :class="{ active: navmoIndex === 5 }" @click="selNav(5)">
          <router-link to="/page/product_mobile">产品中心</router-link>
          <!-- <a href="#">产品中心</a> -->
        </li>
        <li :class="{ active: navmoIndex === 6 }" @click="selNav(6)">
          <router-link to="/page/witness_mobile">客户见证</router-link>
          <!-- <a href="#">客户见证</a> -->
        </li>
        <li :class="{ active: navmoIndex === 7 }" @click="selNav(7)">
          <router-link to="/page/news_mobile">新闻动态</router-link>
          <!-- <a href="#">新闻动态</a> -->
        </li>
        <li :class="{ active: navmoIndex === 8 }" @click="selNav(8)">
          <router-link to="/page/about_mobile">关于我们</router-link>
          <!--  <a href="#">关于我们</a> -->
        </li>
      </ul>
    </div>
    <!--导航结束-->
    <!-- 页头 -->
    <!-- 横幅开始 -->
    <div class="nba">
      <img src="../assets/121.jpg" />
    </div>
    <!-- 横幅结束 -->
    <div class="move">
      <div class="move-top">
        <h5>当前位置：首页>>关于我们>>{{ msg }}</h5>
        <!-- 导航栏开始 -->
        <div class="navt">
          <ul>
            <li
              :class="{ active1: index === 1 }"
              @click="(index = 1), (msg = '大卖场简介')"
            >
              <a>大卖场简介</a>
            </li>
            <li
              :class="{ active1: index === 2 }"
              @click="(index = 2), (msg = '资格证书')"
            >
              <a>资质证书</a>
            </li>
            <li
              :class="{ active1: index === 3 }"
              @click="(index = 3), (msg = '经验理念')"
            >
              <a>经营理念</a>
            </li>
            <li
              :class="{ active1: index === 4 }"
              @click="(index = 4), (msg = '公司相册')"
            >
              <a>公司视频</a>
            </li>
            <li
              :class="{ active1: index === 5 }"
              @click="(index = 5), (msg = '联系我们')"
            >
              <a>联系我们</a>
            </li>
            <li
              :class="{ active1: index === 6 }"
              @click="(index = 6), (msg = '在线留言')"
            >
              <a>在线留言</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 导航栏结束 -->
      <div class="move-foot">
        <!-- 大卖场简介开始 -->
        <div class="jianjie" v-show="index == 1">
          <div class="jianjie_top">
            <h1>万力达消防设备大卖场</h1>
            <div class="jianjie_left">
              <p> 万力达消防设备大卖场是国内顶尖的消防设备批发走量设备集结机构，更是生产厂家深度依赖的大卖场销售平台主渠道。万力达消防设备大卖场以批发消防设备量大而享誉业内，以销量大、质量优、性价比高、价格低，赢得了用户公认的优质口碑，万力达消防设备大卖场致力于为客户提供完善的售前、售中、售后一站式技术服务，零售商更是可享批发平台以下优惠价格福利！行业
                208家生产厂家挤身加盟到万力达消防设备大卖场中做批发冲量。是地产商、建筑总包商、消防工程公司、各大批发门店、个人施工队、政府项目业主争相合作大平台。卖场以“批发量大；价格更便宜”为宗旨。为您节省每一分钱也是万力达人的心愿！
              </p>
            </div>
            <div class="jianjie_right">
              <img src="../assets/3-1.jpg" />
            </div>
          </div>
          <div class="jianjie_foot">
            <h1>为什么选择我们？</h1>
            <img src="../assets/qqq.jpg" />
          </div>
        </div>
        <!-- 大卖场简介结束 -->
        <!-- 资格证书开始 -->
        <div class="zhengshu" v-show="index == 2">
          <div v-for="(item, index2) in certList" :key="index2">
            <img :src="item.img" />
            <p>{{ item.name }}</p>
          </div>
        </div>
        <!-- 资格证书结束 -->
        <!-- 经营理念开始 -->
        <div class="linian" v-show="index == 3">
          <h1>企业理念</h1>
          <div class="linian_top">
            <ul>
              <li>
                忠信、坚韧、创新、和谐、共荣是万力达消防设备大卖场20余年历史发展沉淀的企业文化，成为了公司全体员工共同的核心价值观和行为准则。
              </li>
              <li>
                朝气蓬勃的企业，乐观向上的员工，协同和谐的团队是公司赢得市场竞争，走向更加辉煌的致胜法宝。
              </li>
              <li>企业宗旨：为客户创造价值，为员工创造幸福，为社会创造财富</li>
              <li>企业精神：忠信坚韧，创新改进</li>
              <li>企业核心价值观：责任、诚信、创造、共赢</li>
              <li>企业核心竞争力：人才、创新、品牌</li>
              <li>企业道德：厚德做人、立信治企</li>
              <li>企业愿景：追求卓越、中国第一、世界品牌</li>
              <li>经营理念：目标为王、共享共荣</li>
              <li>管理理念：严格管理精细化、规范管理标准化、创新管理全员化</li>
              <li>质量理念：以出现0.001%的问题为耻，以实现100%的合格为荣</li>
              <li>人才理念：尊重知识，尊重人才，知人善用，德才并举</li>
              <li>市场理念：顾客的需要就是市场</li>
              <li>安全理念：不放过每一个隐患，不报有每一丝侥幸</li>
              <li>团队理念：共享奋斗的历程，共享进取的艰辛，共享成功的喜悦</li>
              <li>工作理念：认真完成每件事，快乐工作每一天</li>
            </ul>
          </div>
          <div class="linian_foot">
            <img src="../assets/5-7.jpg" />
          </div>
        </div>
        <!-- 经验理念结束 -->
        <!-- 公司视频开始 -->
        <div class="xiangce" v-show="index == 4">
          <video
            v-for="(item, index1) in videoList"
            :key="'v' + index1"
            :src="item.url"
            :poster="item.poster"
            controls
          ></video>
        </div>
        <!--    <div class="xiangce-zu" v-show="index == 4">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="60"
          ></el-pagination>
        </div> -->
        <!-- 公司视频结束 -->
        <!-- 联系我们开始-->
        <div class="women" v-show="index == 5">
          <h1>欢迎新老客户来万力达消防设备大卖场参观考察</h1>
          <div class="women1">
            <ul>
              <li>
                <img src="../assets/5-2.jpg" />
                <h2>公司地址</h2>
                <p>地址：{{configData.city}}</p>
              </li>
              <li>
                <img src="../assets/5-3.jpg" />
                <h2>联系方式</h2>
                <p>手机：{{configData.mobile}}</p>
                <!-- <p>服务热线：{{configData.hotile}}</p> -->
              </li>
              <li>
                <img src="../assets/5-4.jpg" />
                <h2>联系邮箱</h2>
                <p>2277018150@qq.com</p>
              </li>
              <li>
                <img src="../assets/5-5.jpg" />
                <h2>联系QQ</h2>
                <p>{{configData.mail}}</p>
              </li>
            </ul>
          </div>
          <div class="mmt">
            <!-- <img src="../assets/5-1.jpg" /> -->
            <baidu-map id="container" ref="container" class="bm-view" :center="{lng: configData.coordinate.split(',')[0], lat: configData.coordinate.split(',')[1]}" :zoom="20" :scroll-wheel-zoom="true">
              <bm-marker :position="{lng: configData.coordinate.split(',')[0], lat: configData.coordinate.split(',')[1]}" :dragging="false" @click="infoWindowOpen">
                <bm-info-window :show="show" @close="infoWindowClose" @open="infoWindowOpen">
                  万力达消防设备大卖场<br />
                  地址：陕西万力达消防设备有限公司
                </bm-info-window>
              </bm-marker>
            </baidu-map>
          </div>
        </div>
        <!-- 联系我们结束 -->
        <!-- 在线留言开始 -->
        <div class="liuyan" v-show="index == 6">
          <h1>给我们留言</h1>
          <div class="liu">
            <input class="liu1" placeholder="您的姓名" v-model="message.name" />
            <input
              class="liu2"
              placeholder="您的联系方式"
              v-model="message.mobile"
            />
            <input class="liu3" placeholder="您的邮箱" v-model="message.emil" />
            <input
              class="liu4"
              placeholder="您的公司"
              v-model="message.company"
            />
            <textarea
              style="resize: none"
              class="liu5"
              placeholder="请输入您的需求内容"
              v-model="message.demand"
            ></textarea>
            <button class="xinxi" @click="sendMess">提交信息</button>
          </div>
        </div>
        <!-- 在线留言结束 -->
      </div>
    </div>
    <!--脚部开始-->
    <div class="foot">
      <div class="foot_top">
        <div class="who">
          <h1>联系我们</h1>
          <p>服务热线：{{configData.mobile}}</p>
          <p>QQ：{{configData.qq}}</p>
          <p>地址：{{configData.city}}</p>
        </div>
      </div>
      <div class="foots">
        <div class="whoo">
          <p>
            {{configData.copyright}}<br />
            {{configData.record_number}}
          </p>
        </div>
      </div>
    </div>
    <!--脚部结束-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      index: 5,
      msg: "大卖场简介",
      navmoIndex: 0,
      hide: false,
      message: {
        name: "",
        mobile: "",
        emil: "",
        company: "",
        demand: "",
      },
      videoList: [],
      certList: [],
      configData: {},
      show: true
    };
  },
  created() {
    if (localStorage.getItem("navmoIndex")) {
      this.navmoIndex = +localStorage.getItem("navmoIndex");
      console.log(this.navmoIndex);
    }
  },
  computed: {},
  watch: {},
  mounted() {
    this.getVideo();
    this.getCert();
    this.getConfig()
    window.scrollTo(0, 0);
    if (this.$route.query.num) {
      this.index = +this.$route.query.num;
    }
  },
  methods: {
    infoWindowClose () {
      this.show = false
    },
    infoWindowOpen () {
      this.show = true
    },
    selNav(a) {
      this.navmoIndex = a;
      localStorage.setItem("navmoIndex", this.navmoIndex);
      console.log(a, this.navmoIndex);
    },
    sendMess() {
      // 用户留言
      var _this = this;
      _this.$ajax
        .post("http://api.wld119.com/api/v1/Leaving/add", this.message)
        .then((res) => {
          console.log("用户留言", res.data.result);
          alert("留言成功");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getVideo() {
      //公司视频
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/video")
        .then((res) => {
          console.log("公司视频", res.data.result.data);
          this.videoList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getCert() {
      //证书图片
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/article/cert")
        .then((res) => {
          console.log("证书图片", res.data.result.data);
          this.certList = res.data.result.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getConfig () {
      var _this = this;
      _this.$ajax
        .get("http://api.wld119.com/api/v1/config")
        .then((res) => {
          console.log("配置", res.data.result);
          this.configData = res.data.result;
 
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style  scoped>
.about-mobile {
  max-width: 7.5rem;
  margin: 0 auto;
}
/* 页头 */
.yetou {
  color: #fff;
  background: #0061ae;
  height: 1.4rem;
}
.none {
  width: 7rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
}
.bt-left {
  padding: 0.1rem;
}
.bt-left h1 {
  font-size: 0.45rem;
}
.bt-left p {
  font-size: 0.35rem;
}
.menu img {
  width: 0.8rem;
}
/* 页头 */
/* 导航开始*/
.nav-tb {
  width: 100%;
  text-align: center;
  background: #f9f9f9;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: hidden;
}
.vae a {
  display: block;
  border: 1px solid #ededed;
  padding: 0.2rem;
  line-height: 0.4rem;
}
.nav-tb li {
  width: 2.5rem;
}
.nav-tb a:hover {
  color: #ffffff;
  background: #d6af62;
}
.active1 a {
  border-bottom: 0.1rem solid #0061ae;
}
/* 导航结束*/
/* 横幅 */
.nba img {
  width: 100%;
}
/* 横幅 */
/* 导航栏开始 */
.move-top {
  font-size: 0.3rem;
  width: 7rem;
  margin: 0 auto;
}
.navt {
  width: 7rem;
  text-align: center;
  margin-top: 0.2rem;
  overflow: hidden;
}
.navt ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
}
.navt li {
  line-height: 0.8rem;
  clear: none;
  overflow: hidden;
  font-size: 0.25rem;
  padding-right: 0.05rem;
  border-right: 1px solid #eeeeee;
}
/* 导航栏结束 */
/* 大卖场简介开始 */
.jianjie {
  width: 7rem;
  margin: 0 auto;
  overflow: hidden;
}
.jianjie_top h1 {
  font-size: 0.3rem;
  text-align: center;
  padding: 0.2rem;
}
.jianjie_left p {
  font-size: 0.25rem;
  text-indent: 0.5rem;
}
.jianjie_right img {
  width: 6.9rem;
}
.jianjie_foot h1 {
  font-size: 0.3rem;
  text-align: center;
  margin-top: 0.1rem;
}
.jianjie_foot img {
  width: 7rem;
  overflow: hidden;
  margin-top: 0.2rem;
}
/* 大卖场简介结束 */
/* 资格证书开始 */
.zhengshu {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
  font-size: 0.25rem;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  /* justify-content: space-between; */
  overflow: hidden;
}
.zhengshu img {
  width: 2.33rem;
}
/* 资格证书结束 */
/* 企业理念开始 */
.linian {
  width: 7rem;
  margin: 0 auto;
  overflow: hidden;
}
.linian h1 {
  padding: 0.2rem;
  font-size: 0.3rem;
  font-weight: bold;
  text-align: center;
}
.linian_top li {
  font-size: 0.25rem;
  padding-top: 0.1rem;
  font-style: initial;
}
.linian_foot img {
  float: right;
  overflow: hidden;
  width: 6rem;
}
/* 企业理念结束 */
/* 公司视频开始 */
.xiangce {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
  padding-top: 0.2rem;
  overflow: hidden;
}
.xiangce video {
  width: 7rem;
  height: 4rem;
}
.xiangce-zu {
  margin-top: 0.1rem;
  text-align: center;
  margin-bottom: 0.2rem;
}
/* 公司视频结束 */
/* 联系我们开始 */
.women {
  width: 7rem;
  margin: 0 auto;
  text-align: center;
}
.women h1 {
  font-size: 0.3rem;
  text-align: center;
  padding: 0.2rem;
}
.women1 img {
  width: 0.5rem;
}
.women1 ul {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  overflow: hidden;
}
.women1 ul li {
  width: 1.67rem;
  height: 3rem;
  border: 0.01rem solid #f3f3f3;
}
.women1 h2 {
  font-size: 0.25rem;
  font-family: initial;
  text-align: center;
}
.women1 p {
  font-size: 0.25rem;
  word-break: break-all;
  text-align: center;
}
.women1 img {
  margin-top: 0.1rem;
}
.mmt {
  height: 4.5rem;
  margin-top: 0.1rem;
  text-align: center;
}
.bm-view{
  width: 100%;
  height: 100%;
}
.mmt img {
  width: 7rem;
  margin-top: 0.1rem;
  text-align: center;
}
.women li {
  transition: 0.3s all ease;
  border: 1px solid #000;
  position: relative;
}
.women li:hover {
  transform: scale(1.1);
  background: #fff;
  z-index: 1;
}
/* 联系我们结束 */
/* 在线留言开始 */
.liuyan {
  width: 7rem;
  margin: 0 auto;
}
.liuyan h1 {
  font-size: 0.3rem;
  padding: 0.2rem;
  text-align: center;
}
.liu {
  width: 6rem;
  margin: 0 auto;
  text-align: center;
}
.liu1 {
  margin-top: 0.1rem;
  border: 0 solid #fff;
  width: 6rem;
  height: 0.7rem;
  border: 0.01rem solid #e5e5e5;
}
.liu2 {
  margin-top: 0.1rem;
  border: 0 solid #fff;
  width: 6rem;
  height: 0.7rem;
  border: 0.01rem solid #e5e5e5;
}
.liu3 {
  margin-top: 0.1rem;
  border: 0 solid #fff;
  width: 6rem;
  height: 0.7rem;
  border: 0.01rem solid #e5e5e5;
}
.liu4 {
  margin-top: 0.1rem;
  border: 0 solid #fff;
  width: 6rem;
  height: 0.7rem;
  border: 0.01rem solid #e5e5e5;
}
.liu5 {
  margin-top: 0.1rem;
  border: 0 solid #fff;
  width: 6rem;
  height: 1.8rem;
  border: 0.01rem solid #e5e5e5;
}
.xinxi {
  background: #0061ae;
  color: #ffffff;
  width: 6rem;
  height: 0.7rem;
  border: 0;
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
/* 在线留言结束 */
/* 页脚开始 */
.foot_top {
  line-height: 0.45rem;
  margin: 0 auto;
  background: #0061ae;
  color: #fff;
  overflow: hidden;
}
.foot_top h1 {
  font-size: 0.35rem;
  padding: 0.1rem;
}
.foot_top p {
  font-size: 0.25rem;
  padding: 0 0.1rem;
  padding-bottom: 0.1rem;
}
.foots {
  line-height: 0.4rem;
  margin: 0 auto;
  background: #666;
  color: #fff;
}
.foots p {
  font-size: 0.2rem;
  text-align: center;
}
.who,
.whoo {
  width: 7rem;
  margin: 0 auto;
}
/* 页脚结束 */
</style>